<template>
  <div>
    <img src=".././assets/logo.png" />
    <h1>js方法使用</h1>
    <el-button type="primary" round>当前时间戳：{{ timeNum }}</el-button>
    <el-button type="success" round>时间戳转换：{{ time }}</el-button>
    <div style="margin-top: 50px; width: 500px; margin: 50px auto">
      <el-input
        :placeholder="placeholder"
        v-model="input3"
        class="input-with-select"
      >
        <el-select
          v-model="select"
          slot="prepend"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="邮箱号" value="2"></el-option>
          <el-option label="手机号" value="3"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="butClick"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
import { timeFilter } from '../libs/time.js'
import { phoneFun, emailFun } from '../libs/regular.js'

export default {
  name: 'HelloWorld',
  data () {
    return {
      timeNum: '',
      time: '',
      input3: '',
      select: '',
      placeholder: ''
    }
  },
  methods: {
    butClick () {
      switch (~~this.select) {
        case 1:
          this.$message({
            message: '没有任何校验，要看功能请选择邮箱或手机',
            type: 'success'
          })
          break
        case 2:
          if (emailFun(this.input3) === true) {
            this.$message({
              message: '邮箱验证通过',
              type: 'success'
            })
          } else {
            this.input3 = ''
          }
          break
        case 3:
          if (phoneFun(this.input3) === true) {
            this.$message({
              message: '手机验证通过',
              type: 'success'
            })
          } else {
            this.input3 = ''
          }
          break
        default:
          this.$notify.error({
            title: '错误',
            message: '请选择要操作的功能'
          })
      }
    }
  },
  mounted () {
    var date1 = new Date()
    this.timeNum = Date.parse(date1)
    this.time = timeFilter(this.timeNum, 'YY-MM-DD hh:mm:ss')
    // console.log()
  },
  watch: {
    select (file) {
      switch (~~file) {
        case 1:
          this.placeholder = '请输入餐厅名'
          break
        case 2:
          this.placeholder = '请输入邮箱'
          break
        case 3:
          this.placeholder = '请输入手机号'
          break
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
